<template>
  <div>
    <div class="toolbar-item" :class="{'selection-active': selectionOpened}" @click="$_selectionSelect()">
      <area-select size="18"/>
    </div>
    <div class="toolbar-item" @click="$_zoomIn()">
      <zoom-in size="18"/>
    </div>
    <div class="toolbar-item" @click="$_zoomOut()">
      <zoom-out size="18"/>
    </div>
    <div
        class="toolbar-item"
        :class="{'disabled': !undoAble}"
        @click="$_undo()"
    >
      <step-back size="18"/>
    </div>
    <div
        class="toolbar-item"
        :class="{'disabled': !redoAble}"
        @click="$_redo()"
    >
      <step-forward size="18"/>
    </div>
    <div>
      <el-select v-model="lineType" size="small" class="w-160" @change="$_changeLineType">
        <el-option
            v-for="item in lineOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label"
        ></el-option>
      </el-select>
    </div>

    <div class="toolbar-item" @click="$_export">
      <Export size="18" width="18" height="18"/>
    </div>
<!--    <div style="margin-left: 10px">
      <el-button @click="$_saveGraph" type="primary" size="small">保存</el-button>
    </div>-->
    <el-dialog
        v-model="showExportSelect"
        title="导出"
        append-to-body
        close-on-click-modal
        center
        width="400"
    >
      <div class="padding-lr-17">
        导出文件名称：
        <el-input v-model="exportName" placeholder="输入文件名" clearable maxlength="50" class="w-300"/>
      </div>
      <div class="flex justify-content-between padding-17">
        <el-card
            shadow="always"
            class="customer-card"
            :class="exportType === 'image' ? 'selected' : ''"
            @click="setExportType('image')"
        >
          <el-icon style="font-size: 50px; color: var(--el-color-primary)">
            <ImagePng/>
          </el-icon>
          <div class="customer-card-item">
            <h1>图片</h1>
            <h2>适合查看、分享、打印</h2>
          </div>
        </el-card>
<!--        <el-card
            shadow="always"
            class="customer-card"
            :class="exportType === 'pdf' ? 'selected' : ''"
            @click="setExportType('pdf')"
        >
          <el-icon style="font-size: 50px; color: var(&#45;&#45;el-color-danger)">
            <PdfFilled/>
          </el-icon>
          <div class="customer-card-item">
            <h1>PDF</h1>
            <h2>适合打印</h2>
          </div>
        </el-card>
        <el-card
            shadow="always"
            class="customer-card"
            :class="exportType === 'svg' ? 'selected' : ''"
            @click="setExportType('svg')"
        >
          <el-icon style="font-size: 50px; color: var(&#45;&#45;el-color-warning)">
            <SvgFilled/>
          </el-icon>
          <div class="customer-card-item">
            <h1>SVG</h1>
            <h2>可缩放矢量图形</h2>
          </div>
        </el-card>-->
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showExportSelect = false">取消</el-button>
          <el-button type="primary" @click="confirmExport"> 确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ZoomIn from './icon/ZoomIn.vue'
import ZoomOut from './icon/ZoomOut.vue'
import StepBack from './icon/StepBack.vue'
import StepForward from './icon/StepFroward.vue'
import AreaSelect from './icon/AreaSelect.vue'
import Export from "@/icons/Export.vue"
import PdfFilled from "@/icons/PdfFilled.vue"
import ImagePng from "@/icons/ImagePng.vue"
import SvgFilled from "@/icons/SvgFilled.vue"

export default {
  props: {
    lf: Object,
    activeEdges: Array,
    fillColor: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showExportSelect: false,
      exportType: 'image',
      exportName: '流程图',
      selectionOpened: false,
      undoAble: false,
      redoAble: false,
      colors: '#345678',
      lineType: 'pro-polyline',
      lineOptions: [
        {
          value: 'pro-polyline',
          label: '折线'
        },
        {
          value: 'pro-line',
          label: '直线'
        },
        {
          value: 'pro-bezier',
          label: '曲线'
        }
      ]
    }
  },
  mounted() {
    this.$props.lf.on('history:change', ({data: {undoAble, redoAble}}) => {
      this.$data.redoAble = redoAble
      this.$data.undoAble = undoAble
    })
  },
  methods: {
    $_saveGraph() {
      this.$emit('saveGraph')
    },
    $_zoomIn() {
      this.$props.lf.zoom(true)
    },
    $_zoomOut() {
      this.$props.lf.zoom(false)
    },
    $_undo() {
      if (this.$data.undoAble) {
        this.$props.lf.undo()
      }
    },
    $_redo() {
      if (this.$data.redoAble) {
        this.$props.lf.redo()
      }
    },
    $_selectionSelect() {
      this.selectionOpened = !this.selectionOpened
      if (this.selectionOpened) {
        this.lf.extension.selectionSelect.openSelectionSelect()
      } else {
        this.lf.extension.selectionSelect.closeSelectionSelect()
      }
    },
    $_changeLineType(value) {
      const {lf, activeEdges} = this.$props
      const {graphModel} = lf
      lf.setDefaultEdgeType(value)
      if (activeEdges && activeEdges.length > 0) {
        activeEdges.forEach(edge => {
          graphModel.changeEdgeType(edge.id, value)
        })
      }
    },
    $_export() {
      this.showExportSelect = true
    },
    setExportType(value) {
      this.exportType = value
    },
    confirmExport() {
      if (this.exportName.trim() === '') {
        this.$message.warning('请输入文件名')
      }
      if (this.exportType === 'image') {
        this.exportImage()
      }
      // } else if (this.exportType === 'pdf') {
      //   this.exportPdf()
      // }
    },
    exportImage() {
      this.lf.getSnapshot(this.exportName + '.png', '')
    },
  },
  components: {
    PdfFilled,
    ImagePng,
    SvgFilled,
    Export,
    ZoomIn,
    ZoomOut,
    StepBack,
    StepForward,
    AreaSelect,
  }
}
</script>

<style scoped lang="scss">
.toolbar-item {
  width: 18px;
  height: 18px;
  float: left;
  margin: 12px 4px;
  cursor: pointer;
  &.disabled {
    color: #9f9f9f;
  }
}

.toolbar-color-picker {
  width: 24px;
  height: 24px;
  margin: 8px 4px;
}

.customer-card {
  width: 300px;
  border-radius: 10px;

  &.selected {
    border-color: var(--el-color-primary);
    border-width: 2px;
  }

  .customer-card-item {
    margin-left: 10px;
    float: right;
    width: 180px;

    h1 {
      font-size: 16px;
      color: var(--el-text-color-primary);
    }

    h2 {
      font-size: 13px;
      color: var(--el-text-color-regular);
      font-weight: normal;
    }
  }
}

.selection-active {
  background: #33a3dc;
}
</style>
